<script lang="ts" setup>
const emit = defineEmits(["update:curWk"]);
const props = defineProps({
  curWk: {
    type: [Number, String],
    default: ""
  }
});
const curWk = toRef(props, "curWk");
// const weekList: string[] = [
//   "Monday",
//   "Tuesday",
//   "Wednesday",
//   "Thursday",
//   "Friday",
//   "Saturday",
//   "Sunday"
// ];
const weekList = Array.from(Array(7).keys()).map(i => i + 1);
const show = ref(false);
function handleClick(it: string | number, idx: number) {
  show.value = false;
  // curWk.value = it;
  emit("update:curWk", it, idx);
}
function toggleShow() {
  show.value = !show.value;
}

defineExpose({
  toggleShow
});
</script>
<template>
  <div>
    <div v-if="show" class="absolute top-27 left-0 w-full">
      <ul
        class="h-180 overflow-y-scroll shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)]"
      >
        <li
          class="h-40 flex justify-start items-center pl-20 bg-[#fff] b-b-1 b-b-solid b-b-[#e5e5e5] last-of-type:b-b-none"
          v-for="(it, idx) in weekList"
          :key="idx"
          @click.stop="handleClick(it, idx)"
        >
          <span>{{ it }}</span>
        </li>
      </ul>
    </div>
    {{ curWk }}
  </div>
</template>
